<template>
	<ComPop
		v-model="visible"
		width="400px"
		title="提示信息"
		@saveSubmit="saveProSubmit"
	>
		<div class="mb-2">
			<el-form>
				<el-form-item label="选择解绑车辆：">
					<el-select
						v-model="selectedVehicle"
						multiple
						placeholder="请选择要解绑的车辆"
						style="width: 100%"
					>
						<el-option
							v-for="car in boundVehicles"
							:key="car"
							:label="car"
							:value="car"
						/>
					</el-select>
				</el-form-item>
			</el-form>
		</div>
	</ComPop>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
const visible = ref(false);
const boundVehicles = ref<string[]>([]);
const selectedVehicle = ref<string[]>([]);
function open(bound: string[]) {
	visible.value = true;
	boundVehicles.value = bound;
	selectedVehicle.value = [];
}
function saveProSubmit() {
	if (!selectedVehicle.value) {
		ElMessage.warning('请选择要解绑的车辆');
		return;
	}
	ElMessageBox.confirm(
		`确定要把车辆${selectedVehicle.value.join(',')}与驾驶员解绑？解除解绑后该驾驶员将不能驾驶该车辆进行运输作业。`,
	).then(() => {
		// TODO: emit 解绑车辆
		visible.value = false;
	});
}
defineExpose({ open });
</script>
<style scoped>
.mb-2 {
	margin-bottom: 12px;
}
</style>
